<template>
	<view>
		<u-tabs :list="tabBars" line-width="60" :scrollable="false" :current="tabIndex" @change="tapTab"></u-tabs>
		<view class="content">
			<uni-search-bar
				radius="100" 
				:placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" 
				@confirm="search($event, 'search')" 
				@cancel="search($event, 'cancel')" 
				@clear="search($event, 'cancel')"
			/>
			
			<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="changeTab">
				<template v-for="(tab, index) in tabBars">
					<swiper-item :key="index">
						<mescroll-item ref="mescrollItem" :i="index" :index="tabIndex" :params="params" :searchText="searchText"></mescroll-item>
					</swiper-item>
				</template>			 
			</swiper>
		</view>
	</view>
</template>

<script>
	import MescrollItem from "./index-content.vue"
	
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				tabIndex: 0,
				tabBars: [
					{ name: '待完成' },
					{ name: '已完成' },
					{ name: '我发起的' }
				],
				searchText: '',
				params: {}
			}
		},
		onLoad() {
			
		},
		methods: { 
			tapTab(e) {
				this.tabIndex = e.index
			},
			search(val, type) {
				this.searchText = ""
				if(type === "search") {
					this.searchText = val.value
				}
				this.$nextTick(()=>{
					this.$refs.mescrollItem[this.tabIndex].reload()
				})
			},
			changeTab(e) {
				this.tabIndex = e.target.current 
				this.params = {}
			},
			reload(index){
				this.$refs.mescrollItem[index].reload()
			}
		},
		onNavigationBarButtonTap(e) {
			let that = this
			uni.navigateTo({
				url: "/pages/base/flow/filter",
				events: {
					dataFilter(data) {
						that.params = data
						setTimeout(()=>{
							that.reload(that.tabIndex)
						}, 100)
					}
				}
			})
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F1F1F1;
	}
	
	.swiper-box {
		/* #ifdef H5 */
		height: calc(100vh - 145px);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - 88px);
		/* #endif */
	}
</style>
